<toaster-container></toaster-container>
<div>
    <h3>ESG Weight Matrices</h3>
</div>
<hr>
<div *ngIf="slots" class="row">
    <div class="col-md-3">
        Available platform slots:
    </div>
    <!-- START: search criteria  -->
    <div class="col-md-9">
        {{slots}} of 100 used slots
    </div>
</div>  

<div *ngIf="accounts" class="row mt-3">
    <div class="col-md-3">
        Account Name:
    </div>
    <div class="col-md-7">
        <select [(ngModel)]="selectedAccount" class="form-control mb-2" (change)="getMatrices()">            
            <option *ngFor="let account of accounts | enumToArray" [ngValue]="account.id">
                {{account.name}} - {{account.platformTier === 100000000 ? 'Tier 1' : account.platformTier === 100000001 ? 'Tier 2': 'Tier 3'}}
            </option>
        </select>
    </div>
</div>

<div class="row">
    <div class="offset-md-3 col-md-7">
        <button class="btn btn-primary-dark" (click)="addMatrix()" [disabled]="selectedAccount == undefined">Add new custom matrix</button>
    </div>
</div>

<sustainalytics-table #weightTable [columns]="columns" [source]="matrices" [elementCount]="count" [paginationPositionDisplay]="paginationPosition"
  [displayTitle]="false" (buttonClicked)="onButtonClicked($event)">
</sustainalytics-table>

<app-modal #matrixModal [id]="'matrixModal'" [size]="'modal-xl'" [showCloseButton]=false>
    <div class="app-modal-header">
        Add/Edit Weight Matrix
    </div>
    <div class="app-modal-body">
        <div *ngIf="matrix" class="row">
            <div class="col-md-3">Name</div>
            <div class="col-md-7">
                <input class="form-control" [(ngModel)]="matrix.name">
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-3">Weight Matrix file</div>
            <div class="col-md-9">
                <input type="file" #selectedMatrix ng2FileSelect [uploader]="matrixUploader" style="width:80%"/> 
            </div>
        </div>
    </div>
    <div class="app-modal-footer">
        <button class="btn btn-transparent" (click)="this.matrixModal.hide()">Cancel</button>
        <button class="btn btn-primary-dark" (click)="saveMatrix()">Save</button>
    </div>
</app-modal>